<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  	var point = new BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 12);
	// map.enableScrollWheelZoom(true);
	map.setMapStyleV2({     
  	styleId: '556b6c846f130ec3ad0016f2eba410f6'
	});
	
	/*
	## 添加标注点1

	向地图中心点添加了一个标注，并使用默认的标注样式：
	*/
	// var marker = new BMapGL.Marker(point);        // 创建标注   
	// map.addOverlay(marker);                     // 将标注添加到地图中



	/*
	## 添加标注点2

	定义标注图标 通过Icon类可实现自定义标注的图标，下面示例通过参数MarkerOptions的icon属性进行设置

	1.定义图标对象myIcon
	2.定义marker对象
	3.添加marker到地图 addOverlay

	对比两种方式的icon
	百度地图 通过canvas绘制，跟随地图所移动
	echarts 通过dom绘制，会出现延迟
 
	*/
	/*
	Icon 此类表示标注覆盖物所使用的图标。

	构造函数	描述
	Icon(url: String, size: Size , opts: IconOptions )	以给定的图像地址和大小创建图标对象实例



	Size 此类以像素表示一个矩形区域的大小。
	构造函数	描述
	Size(width: Number, height: Number)	以指定的宽度和高度创建一个矩形区域大小对象

	属性	类型	描述
	width	Number	水平方向的数值
	height	Number	竖直方向的数值


	IconOptions 此类表示Icon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	属性	类型		 描述
	anchor	Size		图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值
	imageOffset	Size	图片相对于可视区域的偏移值


	*/
	var myIcon = new BMapGL.Icon("https://www.youbaobao.xyz/datav-res/datav/location.png", 
	  	new BMapGL.Size(60, 60), {
			/*
			指定定位位置。  
				当标注显示在地图上时，其所指向的地理位置距离图标左上   
				角各偏移10像素和25像素。您可以看到在本例中该位置即是  
				图标中央下端的尖角位置。 
			*/
			anchor: new BMapGL.Size(30, 30),
			/*
			 设置图片偏移。  
				当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
				需要指定大图的偏移位置，此做法与css sprites技术类似。   
			*/
			imageOffset: new BMapGL.Size(0, 0)
		}
	);


	/*
	Marker 此类表示地图上的一个图像标注。
	构造函数	描述
	Marker(point: Point , opts: MarkerOptions )	创建一个图像标注实例。point参数指定了图像标注所在的地理位置


	MarkerOptions  此类表示Marker构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	属性	类型	描述
	offset	Size	标注的位置偏移值
	icon	Icon	标注所用的图标对象
	enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
	enableDragging	Boolean	是否启用拖拽，默认为false
	enableClicking	Boolean	是否响应点击事件。默认为true
	raiseOnDrag	Boolean	拖拽标注时，标注是否开启离开地图表面效果。默认为false
	draggingCursor	String	拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范
	rotation	Number	旋转角度
	title	String	鼠标移到marker上的显示内容

	*/

	// 创建标注对象并添加到地图  
	var marker = new BMapGL.Marker(point, { icon: myIcon });
	
	
	
	// 监听标注事件
	marker.addEventListener("click", function(){   
		/*
		## 添加信息窗口
		*/
		/*
		InfoWindow 此类表示地图上包含信息的窗口。
		构造函数	描述
		InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions )	创建一个信息窗实例，其中content支持HTML内容。

		InfoWindowOptions 此类表示InfoWindow构造函数的可选参数，它没有构造函数，但可通过对象字面量形式表示。
		属性	类型	描述
		width	Number	信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整
		height	Number	信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整
		maxWidth	Number	信息窗最大化时的宽度，单位像素。取值范围：220 - 730
		offset	Size	信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置
		title	String	信息窗标题文字，支持HTML内容
		enableAutoPan	Boolean	是否开启信息窗口打开时地图自动移动（默认开启）
		enableCloseOnClick	Boolean	是否开启点击地图关闭信息窗口（默认开启）


		content: String | HTMLElement   
		"内容"
		"<div><span>title</span></div>"

		*/
		var opts = {
			width: 250, // 信息窗口宽度
			height: 100, // 信息窗口高度
			title: "标题",  // 信息窗口标题
		}
		var infoWindow = new BMapGL.InfoWindow("内容", opts); // 创建信息窗口对象
		/*
		openInfoWindow：官网api没有，但是实际上可以用
		*/
		map.openInfoWindow(infoWindow, point);  // 打开信息窗口  
	});

	/*
	addOverlay(overlay: Overlay )	none	将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
	*/
	map.addOverlay(marker); 









	/*
	## 添加折线

	添加折线覆盖物到地图中。折线覆盖物可以分别设置描边粗细、颜色、填充颜色等属性。
	*/
	/*
	Polyline 绘制线段

	Polyline 使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。
	构造函数	描述
	Polyline(points: Array< Point >, opts: PolylineOptions )	创建折线覆盖物对象

	PolylineOptions 此类表示Polyline构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。
	属性	类型	描述
	strokeColor	String	折线颜色
	strokeWeight	Number	折线的宽度，以像素为单位
	strokeOpacity	Number	折线的透明度，取值范围0 - 1
	strokeStyle	String	折线的样式，solid或dashed
	enableMassClear	Boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
	enableEditing	Boolean	是否启用线编辑，默认为false
	enableClicking	Boolean	是否响应点击事件，默认为true
	geodesic	Boolean	是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false
	clip	Boolean	是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true


	Polygon 此类表示一个多边形覆盖物。
	构造函数	描述
	Polygon(points: Array< Point >, opts: PolygonOptions )	创建多边形覆盖物

	*/
	var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.800),
		new BMapGL.Point(116.405, 39.810),
		new BMapGL.Point(116.425, 39.820)
	], {
		strokeColor: "blue",
		strokeWeight: 2,
		strokeOpacity: 0.5
	});
	map.addOverlay(polyline);










	/*
	## 添加文本标注
	*/
	var content = "欢迎学习数据可视化体系课";
	// 创建文本标注
	var label = new BMapGL.Label(content, {       
		position: point,  // 设置标注的地理位置                        
		offset: new BMapGL.Size(200, 20) // 设置标注的偏移量          
	});


	// 设置label的样式
	label.setStyle({                             
		width: '100px',
		height: '20px',
		padding: '20px',
		color: '#fff',
		fontSize: '20px',
		border: '2px solid #1E90FF',
		background: 'red',
		whiteSpace: 'wrap',
		overflow: 'hidden',
		lineHeight: '20px'
	});
	label.addEventListener('click', function(e) {
		alert(e.target.content);
	});
	map.addOverlay(label);                        // 将标注添加到地图中
</script>
